<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />
		
		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}

			#test {
				width: 200px;
				padding: 5px;
			}

		</style>

	</head>

	<body>
		
		<span id="button01" class="btn"></span>

		<span id="button02" class="btn"></span>

		<span id="button03" class="btn"></span>

		<span id="button04" class="btn"></span>

		<script type="text/javascript" charset="utf-8">
		
			var init = function() {
				
				// creating a new instance of Nokia.SampleWidget that inherits from Nokia.Widget
				var btn1 = new Nokia.Button({
					element: '#button01',
					disabled: false,
					keeppressed: false,
					label: 'Button 01',
					create: function() {
						console.log('Button01: Created');
					},
					click: function() {
						console.log('Button01: Click');
					}
				});

				var btn2 = new Nokia.Button({
					element: '#button02',
					disabled: true,
					label: 'Disabled',
					create: function() {
						console.log('Button02: Created');
					},
					click: function() {
						console.log('Button02: Click');
					}
				});

				var btn3 = new Nokia.Button({
					element: '#button03',
					disabled: false,
					keeppressed: true,
					label: 'Button 03',
					pressed: true,
					width: 90,
					create: function() {
						console.log('Button03: Created');
					},
					press: function() {
						this.setLabel('Pressed');
						btn1.disable();
						btn1.setLabel('Disabled');
					},
					unpress: function() {
						this.setLabel('Unpressed');
						btn1.enable();
						btn1.setLabel('Enabled');
					}
				});

				var btn4 = new Nokia.Button({
					element: '#button04',
					disabled: false,
					label: 'Unfocused',
					width: 90,
					create: function() {
						console.log('Button04: Created');
					},
					click: function() {
						console.log('Button04: Click');
					},
					focus: function() {
						this.setLabel('Focused');
					},
					unfocus: function() {
						this.setLabel('Unfocused');
					}
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
			
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('button', init);

		</script>

	</body>
</html>